<template>
  <div class="page-content">
    <el-row>
      <el-col :span="18">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="编号">
            <el-input v-model="query.deviceId" placeholder="编号" clearable/>
          </el-form-item>
          <el-form-item label="名称">
            <el-input v-model="query.name" placeholder="名称" clearable/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" plain @click="getList">查询</el-button>
            <el-button type="info" plain @click="resetForm">重置</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="6">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item style="float: right">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button type="success" @click="handleEdit()">修改</el-button>
            <el-button type="warning" @click="handleRemove()">删除</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-table :data="tableData" style="width: 100%;" @selection-change="handleSelection">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="deviceId" label="编号" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="tran.assetTypeId" label="资产类型"/>
      <el-table-column prop="remark" label="备注"/>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button link type="primary" @click="handleRemove(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="height: 50px;">
    <pagination v-model:size="query.pageSize" v-model:page="query.pageNum" :total="total" @pagination="getList" />
    </div>
      <dwin ref="dialog" :width="1024" :url="'/view/device/edit.vue'" :title="'新增/编辑设备配置'" @onclose="handleClose"></dwin>
  </div>
</template>
<script>
import Dwin from "../../component/dwin.vue";
import Pagination from "../../component/pagination.vue";
import {list,remove} from '/http/device.js'
const {ElMessage,ElMessageBox} = ElementPlus;
export default {
  components: {Dwin,Pagination},
  setup() {
    const tableData = ref([]);
    const total = ref(1);
    const dialog = ref(null);
    const selectRows = ref([])
    const model = {
      name:'',
      deviceId:'',
      pageSize:100,
      pageNum:1
    }
    const query = reactive(Object.assign({},model))
    //const query = toRefs(react);
    const resetForm =()=>{
      Object.assign(query, model);
    }
    const getList=()=>{
      list(query).then(res=>{
        tableData.value = res.data.data;
        total.value = parseInt(res.data.total);
      })
    }
    const handleSelection = (val) => {
      selectRows.value = val
    }
    const handleAdd = () => {
      dialog.value.open();
    }

    const handleEdit = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeEdit(rows,()=>{
        dialog.value.open(rows.value[0]);
      })
    }

    const handleRemove = (row) => {
      let rows = row==null?selectRows:ref([row]);
      beforeRemove(rows,()=>{
        remove(rows.value.map((item) => item.code).join()).then(res=>{
          if(response(res)){
            getList();
          }
        })
      });
    }

    const handleClose = (refresh)=>{
      if(refresh){
        getList();
      }
    }

    const handleTest = ()=>{
    }

    getList();
    return {handleAdd,
      handleEdit,
      handleRemove,
      dialog,
      tableData,
      query,
      getList,
      resetForm,
      handleSelection,
      handleClose,
      total};
  }
}
</script>
<style scoped>

</style>